<template>
  <div class="page">
    <div class="head">
      <div class="back-btn" @click="backMet()">
        <Icon type="ios-arrow-back" />
        {{ $t('user.back_text') }}
      </div>
    </div>
    <!-- 列表 -->
    <div class="table-wrap">
      <div class="table">
        <div class="table-header">
          <Row>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('pay.remittance_no_text') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('pay.remittance_create_time') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('pay.remittance_tit_credentials') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('pay.remittance_tit_amount') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('pay.remittance_tit_bank') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('pay.proof_of_picture') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('user.status') }}</div>
            </div>
            </Col>
            <Col span="3">
            <div class="head-sty">
              <div class="title-text">{{ $t('user.operation') }}</div>
            </div>
            </Col>
          </Row>
        </div>
        <div class="table-content">
          <div class="table-body">
            <div v-for="(item, index) in dataList" class="table-row" :key="index">
              <Row>
                <Col span="3">
                <div class="body-text">{{ item.id }}</div>
                </Col>
                <Col span="3">
                <div class="body-text">{{ item.createTime }}</div>
                </Col>
                <Col span="3">
                <div class="body-text">{{ item.transferNo }}</div>
                </Col>
                <Col span="3">
                <div class="body-weight-text fon-wei">{{ item.currencyCode }}{{ item.transferAmount }}</div>
                </Col>
                <Col span="3">
                <div class="body-text">{{ item.transferBank }}</div>
                </Col>
                <Col span="3">
                <div>
                  <product-picture v-if="item.transferImage" class="body-img"
                    :image-list="[item.transferImage]"></product-picture>
                  <div class="body-text" v-else>-</div>
                </div>
                </Col>
                <Col span="3">
                <div class="body-status" :style="colorMet(item.operateStatus)">
                  {{ compStatus(item.operateStatus) }}
                  <Tooltip :content="compTip(item)" class="tip-icon" max-width="400" placement="top" transfer>
                    <Icon type="ios-help-circle-outline" />
                  </Tooltip>
                </div>
                </Col>
                <Col span="3">
                <div class="body-weight-text cus-btn" v-if="item.operateStatus == 'UNTREAD' && item.repeatNum > 0"
                  @click="againMet(item)">
                  {{ $t('pay.again_btn_text') }}</div>
                <div class="body-weight-text" v-else>-</div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
        <!-- 加载中 -->
        <div class="loading-wrap" v-if="loading">
          <t-loading></t-loading>
        </div>
        <!-- 分页 -->
        <div class="pagination" v-if="!loading">
          <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
            :page-size="form.pageSize" />
        </div>
      </div>
    </div>
    <AgainRemittancePop ref="againRef" @updateMet="getData"></AgainRemittancePop>
  </div>
</template>
<script>
import { getTransferPage } from "@/api/pay";
import TLoading from "@/components/t-loading";
import ProductPicture from "@/views/main/user/components/product-picture";
import AgainRemittancePop from "../components/again-remittance-pop.vue";
export default {
  components: { TLoading, ProductPicture, AgainRemittancePop },
  data() {
    return {
      dataList: [],
      loading: false,
      totalPage: 1,
      form: {
        pageNo: 1,
        pageSize: 40
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    backMet() {
      this.$router.go(-1);
    },
    compStatus(status) {
      // AUDITING-审核中 UNTREAD-审核驳回 RECHARGED-已充值
      switch (status) {
        case "AUDITING":
          return this.$t('pay.under_review');
        case "UNTREAD":
          return this.$t('pay.review_error_status');
        case "RECHARGED":
          return this.$t('pay.credited_success');
        default:
          return "";
      }
    },
    colorMet(status) {
      // AUDITING-审核中 UNTREAD-审核驳回 RECHARGED-已充值
      switch (status) {
        case "AUDITING":
          return "color: #FF9727";
        case "UNTREAD":
          return "color: #FF4D50";
        case "RECHARGED":
          return "color: #32CB9D";
        default:
          return "color: black";
      }
    },
    compTip(item) {
      switch (item.operateStatus) {
        case "AUDITING":
          return this.$t('pay.tip_ing_text');
        case "UNTREAD":
          return item.rejectReason;
        case "RECHARGED":
          return this.$t('pay.tip_success_text');
        default:
          return "";
      }
    },
    getData() {
      this.loading = true;
      getTransferPage(this.form).then((res) => {
        this.loading = false;
        this.dataList = res.result.records;
      }).catch(() => {
        this.loading = false;
      })
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getData();
    },
    onPage(index) {
      this.form.pageNo = index;
      this.getData();
    },
    againMet(item) {
      this.$refs.againRef.open(item);
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  border-radius: 20px;
  background: #FFF;
  padding: 30px;

  .head {
    padding-bottom: 16px;
    border-bottom: 1px solid #E6E7F1;
    margin-bottom: 20px;
    display: flex;

    .back-btn {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #1E1714;
      line-height: 23px;
      cursor: pointer;
    }
  }

  .table-wrap {
    .table {
      .table-header {
        height: 65px;
        background: #F7F9FC;
        border-radius: 8px 8px 8px 8px;

        .head-sty {
          height: 65px;
          display: flex;
          justify-content: center;
          align-items: center;

          .title-text {
            font-family: Open Sans, Open Sans;
            font-weight: 500;
            font-size: 18px;
            color: #929292;
            line-height: 20px;
            text-align: center;
          }
        }
      }

      .table-content {
        .table-body {
          .table-row {
            margin-top: 32px;

            .body-text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #767B93;
              line-height: 62px;
              text-align: center;
            }

            .body-weight-text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              color: #1E1714;
              line-height: 62px;
              text-align: center;
            }

            .fon-wei {
              font-weight: 600;
            }

            .body-img {
              width: 62px;
              height: 62px;
              border-radius: 4px 4px 4px 4px;
              object-fit: cover;
              cursor: pointer;
              display: block;
              margin: 0 auto;
            }

            .body-status {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16px;
              line-height: 62px;
              text-align: center;

              .tip-icon {
                color: #929292;
                font-size: 18px;
                font-weight: 500;
                cursor: pointer;
                margin-left: 4px;
              }
            }

            .cus-btn {
              cursor: pointer;
            }
          }
        }
      }

      .loading-wrap {
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .pagination {
        margin: 24px 0;
        text-align: right;
      }
    }
  }
}
</style>
